<template name="plugin">
	<view>
		<scroll-view scroll-y class="page">
				<block slot="content" bgColor="#fcf"><view style="width: 240upx;height: 60upx; ;"></view></block>
				
				
				<view class="cu-bar btn-group  margin-top">
					<button class="  cu-btn bg-yellow shadow-blur round lg" @tap="newAct">添加任务</button>
				<button class="  cu-btn bg-yellow shadow-blur round lg" @tap="clearStorage">清除缓存</button>
				</view>
			<view class="cu-bar bg-white solid-bottom">
				<view class="action">
					<text class="cuIcon-title text-yellow "></text>
					我的任务
				</view>
			</view>
			
		
			<view class="cu-list menu-avatar" v-for="(item,index) in mypoolList" :key="index" >
				
				<view class="cu-item" style="text-align: left;">
				<view class="content" >
					<text>{{item}}</text>
				</view>
				<view class="action" style="display: inline-flex;width: 240rpx;">
					<button class="cu-btn bg-yellow shadow-blur round"  :data-tag="item"  @tap="removeMe" >删除</button>
					<button class="cu-btn bg-yellow shadow-blur round" :data-tag="item"  data-target="gridModal"  @tap="showModal">打卡</button>
				</view>
			</view>
			</view>

		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'plugin',
	data() {
		return {
			name:'',
			modalName:'',
			myactlist: [],
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar,
			actName:'',
			mypoolList: [],
			actModal:'',
			nickName:'',
		};
	},
	created() {
		let str = uni.getStorageSync("mypoolList");
		this.mypoolList = JSON.parse(str);
	},
	activated(){
		let str = uni.getStorageSync("mypoolList");
		this.mypoolList = JSON.parse(str);
	},
	methods: {
		newAct(){
			let nickName = uni.getStorageSync("nickName");
			if(nickName){
				// this.modalName = "actModal";
				uni.navigateTo({
					url:'../plugin/newAct'
				})
			}
		},
		clearStorage(){
			uni.clearStorageSync();
			// uni.reLaunch({url:'../index/index'});
			uni.navigateBack({
			    delta: 2
			});
		},
		saveActName(){
			if(!this.actName ||	this.actName.trim()===''){
				return;
			}
			if(this.mypoolList.indexOf(this.actName)===-1){
				this.mypoolList.push(this.actName)
				uni.setStorageSync('mypoolList',JSON.stringify(this.mypoolList))
			}
			this.modalName = "";
		},
		
	
		removeMe(e){
			console.log(e.currentTarget.dataset.tag)
			let index = this.mypoolList.indexOf(e.currentTarget.dataset.tag)
			this.mypoolList.splice(index,1)
			uni.setStorageSync('mypoolList',JSON.stringify(this.mypoolList))
		},
		hideModal(e) {
			this.modalName = null
		},
		showModal(e) {
			let nickName = uni.getStorageSync("nickName")
			if(!nickName)
			{
				return;
			}
			uni.navigateTo({
				url: '/pages/plugin/pull?name='+e.currentTarget.dataset.tag
				+"&nickName="+nickName,
			});
			// console.log('showModal',e.currentTarget)
			// this.modalName = e.currentTarget.dataset.target
			// this.name = e.currentTarget.dataset.tag
		},
		PickerChange(e){
				this.actid = e.detail.value
		},
	}
};
</script>

<style>
.page {
	height: 100vh;
	background-color: #fff;
}

.cardTitle {
	color: #fff;
	padding: 90upx 60upx;
	font-size: 40upx;
	font-weight: 300;
	transform: skew(-10deg, 0deg);
	position: relative;
	text-shadow: 0px 0px 6upx rgba(0, 0, 0, 0.3);
}

.cardTitle::before {
	content: '';
	position: absolute;
	width: 60upx;
	height: 6upx;
	border-radius: 20upx;
	background-color: #fff;
	display: block;
	top: 60upx;
	left: 50upx;
	transform: skew(10deg, 0deg);
}

.cardTitle::after {
	content: '';
	position: absolute;
	width: 140upx;
	border-radius: 6upx;
	height: 24upx;
	background-color: #fff;
	display: block;
	bottom: 76upx;
	left: 90upx;
	transform: skew(10deg, 0deg);
	opacity: 0.1;
}
.cu-list.menu-avatar>.cu-item .content{
	left: 20rpx;
	font-size: 36rpx;
}
</style>
